<template>
    <el-row :gutter="10">
        <el-col :span="12">
            <mdViewer :value="md" />
        </el-col>
        <el-col  :span="12">
            <h3>效果展示</h3>
            <div class="right_box">
                <div class="model">
                    <h1>Hello,world</h1>
                </div>
            </div>
        </el-col>
    </el-row>
</template>
<script setup >
import md from "../../doc/css/textPenetrate/README.md?raw";
import mdViewer from "../common/mdViewer.vue"
</script>
<style scoped lang="scss">
 h3{
    font-size: 20px;
    font-weight: 500;
}
.right_box{
    height: 60vh;
    background-image: url("../../assets/images/muban.jpg");
    background-repeat: no-repeat;
}
.model {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 48px;
    border-color: rgba(0,0,0,0.3);
    h1{
        background: url("../../assets/images/muban.jpg") no-repeat center center/cover;
        font-weight: 900;
        -webkit-text-stroke: 1px #fff;
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;   
    }
}



</style>